<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.6"/>
<title>LiquidFun Build and Run Instructions: Building JavaScript version</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript">
  $(document).ready(initResizable);
  $(window).load(resizeHeight);
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td style="padding-left: 0.5em;">
   <div id="projectname">LiquidFun Build and Run Instructions
   </div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.6 -->
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;" 
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){initNavTree('md__building_java_script.html','');});
</script>
<div id="doc-content">
<div class="header">
  <div class="headertitle">
<div class="title">Building JavaScript version </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h3>Background</h3>
<p>LiquidFun can be translated from C++ into JavaScript by <a href="http://github.com/kripken/emscripten/wiki">Emscripten</a>. The entire JavaScript translation is in one file: liquidfun.js.</p>
<p>The LiquidFun source includes a pre-made version of liquidfun.js. You can reference that liquidfun.js to start writing LiquidFun programs in JavaScript right away.</p>
<p>However, if you make changes to the LiquidFun C++ code, or if you need to expose more of the LiquidFun API, you will need to remake liquidfun.js by following the steps on this page.</p>
<h3>Before Building</h3>
<p>We use Emscripten on Linux, but you should be able to use the Emscripten SDK on Mac or Windows too, if you prefer. Note that Mac and Windows build environments have not been tested.</p>
<ul>
<li>Get Emscripten. See <a href="http://github.com/kripken/emscripten/wiki/Emscripten-SDK#installing-from-source">Installing from Source</a>.<ul>
<li>You also need <a href="http://github.com/kripken/emscripten/wiki/LLVM-Backend#getting-fastcomp">Fastcomp</a></li>
<li>And <a href="http://nodejs.org/download/">Node.js</a></li>
</ul>
</li>
<li>Setup Emscripten.<ul>
<li>As suggested in the Emscripten docs, run "emcc -v"</li>
<li>Update your ~/.emscripten file. You'll probably want something like this:<ul>
<li>LLVM_ROOT = os.path.expanduser('~/Code/emscripten-fastcomp/build/Release/bin')</li>
<li>NODE_JS = os.path.expanduser('~/Code/node-v0.10.29-linux-x64/bin/node')</li>
</ul>
</li>
</ul>
</li>
<li>Get the <a href="http://developers.google.com/closure/compiler/">Closure Compiler</a>.</li>
<li>Set environment variables. Depending on your setup, you may want to add some lines like this to your ~/.bashrc file.<ul>
<li>export EMSCRIPTEN=~/Code/emscripten</li>
<li>export CLOSURE_JAR=~/Code/closure/compiler.jar</li>
</ul>
</li>
</ul>
<h3>Building</h3>
<p>The following commands run Emscripten to translate C++ to lf_core.js, then combine lf_core.js with the bindings in jsBindings into liquidfun.js. </p>
<pre class="fragment">cd Box2D/lfjs
make
./uglify.sh
</pre><h3>Executing the Testbed</h3>
<p>For an example program, try openning `Box2D/lfjs/index.html' in your browser. This will load a JavaScript version of the LiquidFun Testbed. It uses the liquidfun.js file that you built above.</p>
<h3>Debugging</h3>
<p>The default output of <code>make</code> and <code>uglify.sh</code> is whitespace-optimized JavaScript that is difficult to debug. To create an un-optimized version of the testbed, please follow the steps below.</p>
<ul>
<li>In <code>lfjs/Makefile</code> change -O2 to -O0, to disable Emscripten optimizations.</li>
<li>In <code>lfjs/index.html</code> replace <code>&lt;script src="liquidfun.js"&gt;&lt;/script&gt;</code> with a similar line for every .js file in <code>lfjs/uglify.sh</code>. It should look something like, <pre class="fragment">  &lt;script src="lf_core.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/offsets.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Common/b2Math.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Collision/b2Collision.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Collision/Shapes/b2EdgeShape.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Collision/Shapes/b2PolygonShape.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Collision/Shapes/b2Shape.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Collision/Shapes/b2ChainShape.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Collision/Shapes/b2CircleShape.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/b2Body.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/b2World.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2WheelJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2WeldJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2GearJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2Joint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2FrictionJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2RevoluteJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2MotorJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2PulleyJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2DistanceJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2PrismaticJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2RopeJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Joints/b2MouseJoint.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/Contacts/b2Contact.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/b2Fixture.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Dynamics/b2WorldCallbacks.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Particle/b2ParticleSystem.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Particle/b2ParticleGroup.js"&gt;&lt;/script&gt;
  &lt;script src="jsBindings/Particle/b2Particle.js"&gt;&lt;/script&gt;</pre> </li>
</ul>
</div></div><!-- contents -->
</div><!-- doc-content -->
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46159502-1', 'auto');
ga('create', 'UA-49880327-7', 'auto', {'name': 'liquidFunTracker'});
ga('send', 'pageview');
ga('liquidFunTracker.send', 'pageview');
</script>
</body>
</html>
